<template>
  <div class="app-container xfzc">
    <h3>{{ this.detailsInfo.placeName }}</h3>
    <el-card class="margin-top-15">
      <el-descriptions title="消防安全管理" :column="3" border>
        <el-descriptions-item label="消防安全制度" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.xfaqglXfaqzd }}
        </el-descriptions-item>
        <el-descriptions-item label="消防安全教育培训" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.xfaqglXfaqjypx }}
        </el-descriptions-item>
        <el-descriptions-item label="防火检查" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.xfaqglFhjc }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.xfaqglBz }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="margin-top-15">
      <el-descriptions title="建筑防火消防设施" :column="3" border>
        <el-descriptions-item label="消防车通道" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.jzfhssXfctd }}
        </el-descriptions-item>
        <el-descriptions-item label="疏散通道、安全出口" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.jzfhssAqck }}
        </el-descriptions-item>
        <el-descriptions-item label="应急照明、疏散指示标志" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.jzfhssYjzm }}
        </el-descriptions-item>
        <el-descriptions-item label="外墙门窗上是否设置影响逃生、灭火求援的障碍物" labelClassName="labelmy" contentClassName="labelmy"> 
          {{ detailsInfo.jzfhssZaw }}
        </el-descriptions-item>
        <el-descriptions-item label="灭火器、逃生绳、防毒面具等" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.jzfhssFdmj }}
        </el-descriptions-item>
        <el-descriptions-item label="是否存在违反消防安全规定存储易燃易爆危险品" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.jzfhssWxp }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" labelClassName="labelmy">
          {{ detailsInfo.jzfhssBz }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="margin-top-15">
      <el-descriptions title="治安检查情况" :column="3" border>
        <el-descriptions-item label="视频监控是否达到要求" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.zajcqkSp }}
        </el-descriptions-item>
        <el-descriptions-item label="四实登记情况核对" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.zajcqkSsdjqk }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { getXfzc } from '@/api/ptsj/xfzc';
import { listInfo } from '@/api/ptsj/info';
import { mapState } from 'vuex';
export default {
  // name: 'eventDetails',
  dicts: ['ptsj_dept_list'],
  data() {
    return {
      detailsInfo: {},
      id: ''
    }
  },
  computed: {
    ...mapState(['user']),
    deptName() {
      let { deptName } = this.user;
      return deptName
    }
  },
  created() {
    console.log(this.$route.query.id);
    if(this.$route.query.id) {
      this.id = this.$route.query.id;
      // this.queryParams.placeCode = this.$route.query.placeCode;
      this.getXfzc()
    }
  },
  methods: {
    async getXfzc() {
      await getXfzc(this.$route.query.id).then(res => {
        try {
          console.log(res)
          if(res.code == 200) {
            this.detailsInfo = res.data;
          }
        } catch {}
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.margin-top-15 {
  margin-top: 15px;
  margin-bottom: 50px;
}
.cus-avator {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 8px;
  border-radius: 4px;
}
.labelmy{
  width: 16%;
}
</style>

<style scoped>
.xfzc >>> .el-descriptions__title {
  font-weight: normal;
  border-left: 4px solid rgb(110, 172, 238);
  padding-left: 15px;
}
</style>